<div class="slick-slider">
  <!-- Content -->
  <div class="slick-list" [class.none]="loading || empty" [class.hidden]="rendering">
    <div class="slick-track" [style.transform]="transform">
      <ng-content></ng-content>
    </div>
  </div>

  <!-- Placehodler -->
  <div *ngIf="!loading && empty && showPlaceholder" class="slick-no-content">
      {{'fui.TABLE.NO_CONTENT' | translate}}
  </div>
  <div *ngIf="loading" class="slick-loading">
    <svg fuiIcon="loading" color="secondary" class="fui-rotate"></svg>
  </div>

  <!-- Nagivation -->
  <ul class="slick-dots" [class.only-dots]="!showNav" *ngIf="showDots && needNagivation">
    <li
      [class.slick-active]="content.isActive"
      *ngFor="let content of slideContents; let i=index"
      (click)="setActive(i, content)"
    >
    </li>
  </ul>
  <div
    class="slick-nav slick-nav-next"
    *ngIf="showNav && canNavigateNext"
    (click)="navigateNext()"
  >
    <svg fuiIcon="angle-right" color="secondary" size="md"></svg>
  </div>
  <div
    class="slick-nav slick-nav-prev"
    *ngIf="showNav && canNavigatePrev"
    (click)="navigatePrev()"
  >
    <svg fuiIcon="angle-left" color="secondary" size="md"></svg>
  </div>
</div>
